<template>
  <skeletonCom v-if="skeleton"></skeletonCom>
  <div v-else class="dw_story">
    <div class="top">
      <img style=" width: 100%; transform:translateY(10px) scale(0.7);" src="@/assets/img/dwgs_txt.png" alt="">
      <van-cell>
        <template #title>
          <span class="title">
            卅载卅人
          </span>
        </template>
        <template #right-icon>
          <span class="more" @click="goMore('szzr')">更多 ></span>
        </template>
      </van-cell>
      <div class="swiper pdlr-17">
        <my-swiper :imageData="newsImageDwgs"></my-swiper>
      </div>
    </div>
    <div class="news">
      <div @click="goDetail(item)" v-for="item in szsrData" class="news-item pdlr-17 mt-20">{{ item.conTitle }}</div>
    </div>
    <div class="divider"></div>
    <van-cell>
      <template #title>
        <span class="story_title title">
          东吴故事
        </span>
      </template>
      <template #right-icon>
        <span class="story_more" @click="goMore('dwgs')">更多 ></span>
      </template>
    </van-cell>
    <div class="swiper pdlr-17">
      <my-swiper :imageData="newsImageSzzr
      "></my-swiper>
    </div>
    <div class="news">
      <div @click="goDetail(item)" v-for="item in dwgsData" class="news-item pdlr-17 mt-20">{{ item.conTitle }}</div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import mySwiper from "@/components/mySwiper/mySwiper.vue";
import { ref } from 'vue';
import { INewsRes, INewsResquestParam } from "../importantNews/type";
import { getNewsBigImage, getNewsList } from "@/api/importantNews";
import { onMounted } from "vue";
import skeletonCom from "@/components/skeletonCom/skeletonCom.vue";
import router from "@/router";
const dwgsData = ref<INewsRes[]>([])
const szsrData = ref<INewsRes[]>([])
const params: INewsResquestParam = {
  token: '',
  page: 1,
  pageSize: 4,
  type: 'dwgs'
}
const skeleton = ref(true)
const newsImageDwgs = ref<Array<INewsRes & {
  newsImg: string
}>>([])
const newsImageSzzr = ref<Array<INewsRes & {
  newsImg: string
}>>([])
onMounted(() => {
  getAll()
})
async function getAll() {
  Promise.all([getData('dwgs'),
  getData('szzr'),
  getBigImage('dwgs'),
  getBigImage('szzr')]).finally(() => {
    console.log('jiazai');

    skeleton.value = false
  })
}
function goMore(type: string) {
  router.push('/dwgs-list/' + type)
}
function goDetail(item: INewsRes) {
  window.location.href = item.linkAddress as string
}
function getData(type: string) {
  params.type = type
  getNewsList(params).then(res => {
    if (res.code == 200) {
      if (type === 'dwgs') {
        dwgsData.value = res.data
      } else {
        szsrData.value = res.data
      }
    }
  })
}
function getBigImage(type: string) {
  getNewsBigImage({
    ...params,
    pageSize: 4,
    type: type + '_big'
  }).then(res => {
    if (res.code == 200) {
      if (type === 'dwgs') {
        newsImageDwgs.value = res.data
      } else {
        newsImageSzzr.value = res.data
      }
    }
  })
}
</script>

<style lang="less" scoped>
.dw_story {
  .news {
    padding-bottom: 20px;

    .news-item {
      text-align: left;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #0D1722;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .top {
    background: url('@/assets/img/dwgs_bg.png') no-repeat center;
    background-size: 100% 100%;
  }



  .divider {
    height: 10px;
    background-color: #f6f8fa;
  }

  .title {
    display: flex;
    align-items: center;
    color: #ffe8b3;
    font-weight: 600;
    font-size: 13px;
    color: #FFE8B3;

    &::before {
      content: '';
      height: 20px;
      width: 5px;
      background-color: #ffe8b3;
      display: inline-block;
      vertical-align: middle;
      margin-right: 7px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }



  .more {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #fff;
    cursor: pointer;
  }

  .story_title {
    font-size: 13px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #0D1722;

    &::before {
      background-color: #d10201;
    }

    color: black;
  }

  .story_more {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #8590A5;
    cursor: pointer;
    font-weight: 400;
  }
}
</style>
<style lang="less">
.dw_story {
  .van-cell__title {
    text-align: left;
  }

  .van-cell {
    background-color: transparent;
  }
}
</style>